<!-- 分页组件 -->
<template>
  <div class="my-pagination" v-show="paginationDate.total>0" >
    <el-pagination v-model:currentPage="paginationDate.currentPage" v-model:page-size="paginationDate.pageSize"
      :page-sizes="paginationDate.pageArr" background layout="total, sizes, prev, pager, next, jumper"
      :total="paginationDate.total" :small="paginationDate.small" @size-change="handleSizeChange"
      :disabled="loading" @current-change="handleCurrentChange" />
  </div>
</template>
<script setup lang='ts'>
import { computed } from 'vue'
import { PaginationDate } from '@/interface/index'
import { useStore } from '@/store'
const store = useStore()
interface PropsType {
  paginationDate: PaginationDate
}
//监控加载状态
const loading = computed(() => {
  return store.getters['loading/getLoad']
})
const props = withDefaults(defineProps<PropsType>(), {
  paginationDate: () => ({
    pageSize: 0,
    currentPage: 0,
    total: 0,
    pageArr: [0]
  })
});
const emit = defineEmits(['listenPage', 'listenPageChange'])
//每页条数选择
const handleSizeChange = (val: number) => {
  emit('listenPage', val)
}
//点击页面跳转
const handleCurrentChange = (val: number) => {
  emit('listenPageChange', val)
}
</script>
<style scoped lang='scss'>
.my-pagination {
  text-align: right;
  padding-top: 15px;

  .el-pagination {
    justify-content: flex-end
  }
}
</style>